<!-- CONTENT -->
<div id="tools-columns">
  <!-- ------------------- LEFT COLUMN -------------------------------- -->
  <div id="tools-columns-left">
    <div id="tools-menu-sticky-div">
      <div class="tools-menu-buttons">
        <button id="tool-xkcd-back-button" class="tools-button-accent">
          <i class="fas fa-angle-left"></i>
          <span id="tool-xkcd-back-button-text"></span>
        </button>
      </div>
      <div class="tools-menu-sections">
        <!-- sections menu -->
        <div id="tool-xkcd-section-0-button" class="tools-menu-button">
          <i class="fas fa-list-ul tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-xkcd-section-0-text"></span>
          </div>
        </div>
        <div id="tool-xkcd-section-1-button" class="tools-menu-button">
          <i class="fas fa-info-circle tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-xkcd-section-1-text"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ------------------- RIGTH COLUMN -------------------------------- -->
  <div id="tools-columns-right">
    <div id="tools-title"><span id="tool-xkcd-title-text"></span></div>
    <!-- catalog -->
    <div id="tool-xkcd-section-0-content-div">
      <h3 id="tool-xkcd-catalog-text"></h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-xkcd-catalog-number-text"></span
          ><select id="tool-xkcd-catalog-number-select"></select
        ></label>
        <button
          id="tool-xkcd-open-selected-acbr-button"
          class="tools-h3-extra-margin-top"
        >
          <span id="tool-xkcd-open-selected-acbr-button-text"></span>
        </button>
        <button id="tool-xkcd-open-selected-browser-button">
          <span id="tool-xkcd-open-selected-browser-button-text"></span>
        </button>
      </div>
    </div>
    <!-- about -->
    <div id="tool-xkcd-section-1-content-div" class="set-display-none">
      <h3 id="tool-xkcd-about-text"></h3>
      <div class="tools-columns-right-subsection">
        <div class="tools-text-paragraphs">
          <p id="tool-xkcd-about-1-text"></p>
          <p id="tool-xkcd-about-2-text"></p>
        </div>
        <button id="tool-xkcd-open-dcm-browser-button">
          <span id="tool-xkcd-open-dcm-browser-button-text"></span>
        </button>
      </div>
    </div>
  </div>
</div>
